<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->

<div xmlns="http://www.w3.org/1999/html" tab-scroll>
<div ng-hide="user.id"><h2 openlmis-message="create.user.label"></h2></div>
<div ng-show="user.id"><h2 id="editUserLabel" openlmis-message="edit.user.label"></h2></div>

<form id="create-user" name="userForm" novalidate select2-blur>
<div class="app-form">

<div class="form-group">
  <h3 openlmis-message="label.basicInformation"></h3>

  <div class="form-row clearfix">
    <div class="form-cell">
      <label for="isMobileUser">
        <span openlmis-message="create.user.mobileUser"></span>
      </label>

      <div class="form-field">
        <input ng-model="user.isMobileUser" name="isMobileUser" id="isMobileUser" type="checkbox" checked="false"/>
        <strong openlmis-message="button.yes"></strong>
      </div>
    </div>

  </div>

  <div class="form-row clearfix">
    <div class="form-cell">
      <label for="userName">
        <span openlmis-message="create.user.userName"></span>
        <span class="label-required"> *</span>
      </label>

      <div class="form-field">
        <input ng-model="user.userName" name="userName" id="userName" type="text" maxlength="50"
               ng-required="true" ng-change="validateUserName()"/>
        <span class="field-error" ng-show="userForm.userName.$error.required && showError"
              openlmis-message="missing.value">
        </span>

        <span class="field-error" ng-show="userNameInvalid" openlmis-message="create.user.invalid.userName">
        </span>
      </div>
    </div>

    <div class="form-cell">
      <label for="email">
        <span openlmis-message="create.user.email"></span>
        <span class="label-required"><span ng-hide="user.isMobileUser"> *</span></span>
      </label>

      <div class="form-field">
        <input ng-model="user.email" name="email" id="email" type="text" maxlength="50"
               ng-required="!user.isMobileUser"/>
        <span class="field-error" ng-show="userForm.email.$error.required && showError"
              openlmis-message="missing.value">
        </span>
      </div>
    </div>
  </div>

  <div class="form-row clearfix">
    <div class="form-cell">
      <label for="firstName">
        <span openlmis-message="create.user.firstName"></span>
        <span class="label-required"> *</span>
      </label>

      <div class="form-field">
        <input ng-model="user.firstName" name="firstName" id="firstName" type="text" maxlength="50"
               ng-required="true"/>
        <span class="field-error" ng-show="userForm.firstName.$error.required && showError"
              openlmis-message="missing.value">
        </span>
      </div>
    </div>


    <div class="form-cell">
      <label for="lastName">
        <span openlmis-message="create.user.lastName"></span>
        <span class="label-required"> *</span>
      </label>

      <div class="form-field">
        <input ng-model="user.lastName" name="lastName" id="lastName" type="text" maxlength="50"
               ng-required="true"/>
        <span class="field-error" ng-show="userForm.lastName.$error.required && showError"
              openlmis-message="missing.value">
        </span>
      </div>
    </div>
  </div>

  <div class="form-row clearfix">
    <div class="form-cell">
      <label for="employeeId" openlmis-message="create.user.employeeId"></label>

      <div class="form-field">
        <input ng-model="user.employeeId" id="employeeId" type="text" maxlength="50"/>
      </div>
    </div>


    <div class="form-cell">
      <label for="jobTitle" openlmis-message="create.user.jobTitle"> </label>

      <div class="form-field">
        <input ng-model="user.jobTitle" id="jobTitle" type="text" maxlength="50"/>
      </div>
    </div>
  </div>


  <div class="form-row clearfix">
    <div class="form-cell">
      <label for="officePhone" openlmis-message="create.user.officePhone"> </label>

      <div class="form-field">
        <input ng-model="user.officePhone" id="officePhone" type="text" maxlength="30"/>
      </div>
    </div>


    <div class="form-cell">
      <label for="cellPhone" openlmis-message="create.user.cellPhone"> </label>

      <div class="form-field">
        <input ng-model="user.cellPhone" id="cellPhone" type="text" maxlength="30"/>
      </div>
    </div>
  </div>

  <div class="form-row clearfix">
    <div class="form-cell">
      <label for="primaryNotificationMethod" openlmis-message="create.user.primaryNotificationMethod"> </label>

      <div class="form-field">
        <input ng-model="user.primaryNotificationMethod" id="primaryNotificationMethod" type="text"
               maxlength="50"/>
      </div>
    </div>

    <div class="form-cell">
      <label>
        <span openlmis-message="create.user.restrictLogin"></span>
        <span class="label-required"> *</span>
      </label>

      <div class="form-field radio-group">
        <input id="restrictLoginYes" ng-model="user.restrictLogin" type="radio" name="restrictLogin"
               ng-value="true"
               ng-required="user.restrictLogin == null || user.restrictLogin == undefined"/>
        <strong openlmis-message="button.yes"></strong> &nbsp; &nbsp; &nbsp;
        <input id="restrictLoginNo" ng-model="user.restrictLogin" type="radio" name="restrictLogin"
               ng-value="false"/>
        <strong openlmis-message="button.no"></strong>
        <span class="field-error" ng-show="userForm.restrictLogin.$error.required && showError"
              openlmis-message="select.value">
        </span>
      </div>
    </div>

  </div>

  <div class="form-row clearfix">
    <div class="form-cell">
      <label id="associatedFacilityLabel">
        <span openlmis-message="create.user.homeFacility"></span>
      </label>

      <div class="form-field input-div associate-facility suggest-field">
        <div id="associatedFacilityField" ng-click="toggleSlider()" class="clearfix">
          <div class="facility-associated">
            <span class="placeholder" ng-show="!facilitySelected" openlmis-message="label.no.facility.selected"></span>
            <span ng-show="facilitySelected">{{facilitySelected.code}} - {{facilitySelected.name}}</span>
          </div>
          <a href="" class="btn" ng-show="!facilitySelected">
            <i class="icon icon-ellipsis-horizontal"></i>
          </a>
        </div>
        <a id="clearFacility" ng-show="facilitySelected"
           href="" class="clear-search" ng-click="confirmFacilityDelete()"></a>
      </div>
    </div>
  </div>

  <div class="position-relative">
    <div class="slider" slider="showSlider" ng-include
         src="'/public/pages/admin/shared/search-filter-facilities.html'"></div>
  </div>

  <div class="form-row clearfix">
    <div class="form-cell">
      <label openlmis-message="label.is.verified"></label>
      <ng-switch on="!!user.verified">
        <span ng-switch-when="true" openlmis-message="button.yes"></span>
        <span ng-switch-when="false" openlmis-message="button.no"></span>
      </ng-switch>
    </div>
  </div>

</div>


<div class="container-fluid">
  <div class="row-fluid">
    <div class="accordion">
      <div class="pull-right control-accordion">
        <a id="expandAll" href="javascript:void(0);" onClick="accordion.expandCollapse('expand')"
           openlmis-message="label.expand.all"></a> /
        <a id="collapseAll" href="javascript:void(0);" onClick="accordion.expandCollapse('collapse')"
           openlmis-message="label.collapse.all"></a>
      </div>
      <div class="clearfix"></div>
      <div class="accordion-section" ng-show='facilitySelected'>
        <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                    <span><strong>+</strong><a
                      id="homeFacilityRoles"
                      href="javascript:void(0);">{{getMessage('create.user.homeFacility.roles')}}</a></span>
        </div>
        <div class="accordion-body prog-role-grid">
          <ng-include src="'/public/pages/admin/user/partials/user-role-assignment.html'"></ng-include>
        </div>
      </div>
      <div class="accordion-section">
        <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                    <span><strong>+</strong><a
                      id="supervisoryRoles"
                      href="javascript:void(0);">{{getMessage('create.user.supervisoryRoles')}}</a></span>
        </div>
        <div class="accordion-body prog-role-grid">
          <ng-include
            src="'/public/pages/admin/user/partials/user-supervisory-role-assignment.html'"></ng-include>
        </div>
      </div>
      <div class="accordion-section">
        <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                    <span><strong>+</strong><a
                      id="orderFulfillmentRoles" href="javascript:void(0);">{{getMessage('create.user.order.fulfillment.roles')}}</a></span>
        </div>
        <div class="accordion-body prog-role-grid">
          <ng-include src="'/public/pages/admin/user/partials/user-warehouse-roles.html'"></ng-include>
        </div>
      </div>
      <div class="accordion-section">
        <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                    <span><strong>+</strong><a
                      id="allocationRoles"
                      href="javascript:void(0);">{{getMessage('create.user.allocationRoles')}}</a></span>
        </div>
        <div class="accordion-body prog-role-grid">
          <ng-include
            src="'/public/pages/admin/user/partials/user-delivery-zone-role-assignment.html'"></ng-include>
        </div>
      </div>
      <div class="accordion-section">
        <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                    <span><strong>+</strong><a
                      id="adminRoles"
                      href="javascript:void(0);">{{getMessage('create.user.adminRoles')}}</a></span>
        </div>
        <div class="accordion-body prog-role-grid">
          <ng-include src="'/public/pages/admin/user/partials/user-admin-role-assignment.html'"></ng-include>
        </div>
      </div>
      <div class="accordion-section">
        <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                    <span><strong>+</strong><a
                      id="reportingRoles"
                      href="javascript:void(0);">{{getMessage('create.user.reportingRoles')}}</a></span>
        </div>
        <div class="accordion-body prog-role-grid">
          <ng-include src="'/public/pages/admin/user/partials/user-reporting-role-assignment.html'"></ng-include>
        </div>
      </div>

      <div class="accordion-section">
        <div class="accordion-heading" onClick="accordion.expandCollapseToggle(this)">
                    <span><strong>+</strong><a
                        id="reportRoles"
                        href="javascript:void(0);">{{getMessage('create.user.reportRoles')}}</a></span>
        </div>
        <div class="accordion-body prog-role-grid">
          <ng-include src="'/public/pages/admin/user/partials/user-report-role-assignment.html'"></ng-include>
        </div>
      </div>

    </div>
  </div>
</div>


<div form-toolbar id="action_buttons" class="action-buttons">
  <div class="form-cell button-row">
    <input id="userSaveButton" type="submit" class="btn btn-primary save-button" openlmis-message="button.save"
           ng-click="saveUser()"/>
    <input id="userCancelButton" type="button" class="btn btn-cancel cancel-button" openlmis-message="button.cancel"
           ng-click="cancel()"/>
    <input id="userDisableButton" type="button" class="btn btn-danger delete-button"
           ng-show="user.active && user.id!=null"
           ng-click="showConfirmUserDisableModal()" openlmis-message="button.disable"/>
    <input id="userEnableButton" type="button" class="btn btn-primary enable-button"
           ng-show="(!user.active && user.id!=null)"
           openlmis-message="button.enable"
           ng-click="showConfirmUserRestoreModal()"/>
    <input id="resetPassword" type="button" class="btn btn-primary enable-button"
           openlmis-message="button.reset.password"
           ng-click="changePassword(user)" ng-show="user.id!=null"/>
  </div>
  <div class="toolbar-error" id="saveErrorMsgDiv" openlmis-message="error" ng-show="error"></div>
  <div class="toolbar-success" id="saveSuccessMsgDiv" openlmis-message="message" ng-show="message"></div>
</div>
</div>
</form>
</div>
<ng-include src="'/public/pages/admin/user/partials/user-reset-password.html'"></ng-include>
